<template>
  <div class="dynamic-modal-page">
    <h2>动态弹框</h2>
    <el-button @click="onAdd">新增</el-button>
    <el-button @click="onEdit">编辑</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    onAdd() {
      this.$dynamicModal({
        component: () => import('./modules/dialog-1.vue'),
        title: '新增',
        showFooter: true,
      }).then(confirm => {
        console.log('确认 => ', confirm);
      }).catch(cancel => {
        console.log('取消 => ', cancel);
      });
    },

    onEdit() {
      this.$dynamicModal({
        component: () => import('./modules/dialog-1.vue'),
        componentProps: {
          form: {
            id: 1,
            name: 'shinn',
            sex: '1',
            hobbies: '旅游',
            specialty: 'football',
          },
        },
        title: '编辑',
        showFooter: true,
      }).then(confirm => {
        console.log('确认 => ', confirm);
      }).catch(cancel => {
        console.log('取消 => ', cancel);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic-modal-page {
  width: 100%;
  height: 100%;
}
</style>
